<template>
    <t-popup v-model="props.value" placement="bottom" :style="{height:'var(--footerBoxHeight)'}" destroy-on-close
             :showOverlay="false">
        <div class="controls active opr-pop">
            <t-row>
                <t-col :span="24">
                    <div>
                        <div class="img-list footer-radio-box justify-content-left">
                            <div class="left-box ">
                                <view :class="`card`">
                                    <div>
                                        <div class="p-3px">
                                            <t-button size="small" theme="primary" variant="dashed" @click="hide">
                                                <t-icon name="chevron-down-double-s" size="25px"></t-icon>
                                            </t-button>
                                        </div>
                                    </div>
                                </view>
                            </div>

                            <div class="right-box horizontal-box">
                                <view v-for="(item, index) in props.data" :key="index"
                                      :class="`card`" @click="tabItem(item)">
                                    <div :value="item.value" icon="none">
                                        <div class="p-3px m-w-max-content">
                                            <div class="opr-icon">
                                                <SvgIcon v-if="useSvgIcon" :name="item.svgIcon" class="m-auto tab-svg-fill" :size="item.svgSize"/>
                                                <t-icon v-else :name="item.svgIcon" class="m-auto"
                                                        :size="item.svgSize"/>
                                            </div>
                                            <div class="label-text">{{ item.label }}</div>
                                        </div>
                                    </div>
                                </view>
                            </div>
                        </div>
                    </div>
                </t-col>
            </t-row>
        </div>
    </t-popup>
</template>

<script setup lang="ts">

import SvgIcon from "@/components/svgIcon/svgIcon.vue";

const props = defineProps({
    value: {
        type: Boolean,
        default: false
    },
    data: {
        type: Array,
        default: []
    },
    useSvgIcon: {
        type: Boolean,
        default: false
    }
})
const emit = defineEmits(['hide','tabItem'])
const hide = () => {
  emit('hide')
}
const tabItem = (item:any) => {
    emit('tabItem',item)
}
</script>

<style scoped>

</style>
